  {% extends 'base.html' %}

{% block scripts %}
<link href="/static/jquery-ui.all.css" rel="stylesheet">
<script src="/static/jquery-ui.js"></script>
<script src="http://calportal3.appspot.com/api/?callback=json12345678&type=majors"></script>
<script>
$(function() {
  var newlist = majorslist.split(" ");
  $("#major").autocomplete({
    source: newlist
  });
});
</script>
<style>
table {
  border-collapse: collapse;
  border: 1px solid gray;
}
tr, td {
  border: 1px solid gray;
}
</style>
{% endblock %}

{% block content %}

<h2>{{title}}</h2>
<h3>{{subtitle}}</h3>

{% if not m %}
<form name="input_major" action="input_major" method="post">
<div class="ui-widget">
Enter a department: <input type="text" name="major" id="major"/>
</div>
<input type="submit" value="Submit"/>
</form>
Or choose from the following:
{% endif %}

{% for major_short, major_long in major_list %}
<li><a href='/classes/{{major_short}}/'>{{major_long}}</a>
{% endfor %}

{% for major_short, class_short, class_long in class_list %}
<li><a href='/classes/{{major_short}}/{{class_short}}'>
{{class_short}}: {{class_long}}</a>
{% endfor %}

{% if section_list %}
<table><tr>
  <td>Section</td>
  <td>CCN</td>
  <td>Time</td>
  <td>Location</td>
  <td>Instructor</td>
  <td></td></tr>
  {% for item in section_list %}
  <tr>
	<td>
    <td>{{item.type}} {{item.num}}</td>
    <td>{{item.ccn}}</td>
    <td>{{item.time}}</td>
    <td>{{item.loc}}</td>
    <td>{{item.teacher}}</td>
    <td>      
      {% if item.primary %}
        <form name="add_class" action="/add_class" method="POST">
          <input type="submit" name="add_class" value="Add Class">
          <input type="hidden" name="section_key" value="{{item.key}}">
        </form>
      {% endif %}
    </td>
  </tr>
  {% endfor %}
</table>
{% endif %}
{% endblock %}